<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

</head>
<body>

<div>
    <!--=====================================================================-->
    <!--
        概括:
        标签中的属性onmouseenter,onmouseleave可以设置一个事件,而这个事件即由JavaScript来控制
        因此早期的js语法主要是用来操控页面上的标签,也不会有模块化 面向对象 作用域等概念
        -->

    <!-- 练习,当鼠标移入时出现div1,移出时消失 -->
    <script>
        //控件代码
        function mouseHint(effect) {
            document.getElementById('div1').style.display = effect;
        }
    </script>

    <button type="button" id="btn1" onmouseenter="mouseHint('block')" onmouseleave="mouseHint('none')">btn</button>
    <!-- div1 -->
    <div id="div1" style="height: 100px; width: 100px; background: brown; display: none">

    </div>
</div>


</body>
</html>